<template>
	<el-dialog title="分类编辑" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
		<el-form label-position="left" label-width="60px" :model="form" :rules="rules" ref="form" class="edit-group-form">
			<el-form-item label="分类" prop="group">
				<el-cascader v-model="form.group" :options="options" placeholder="请选择类别"></el-cascader>
			</el-form-item>
		</el-form>
		<span slot="footer" class="dialog-footer">
			<el-button @click="handleClose">取消</el-button>
			<el-button type="primary" @click="handleConfirm">确定</el-button>
		</span>
	</el-dialog>
</template>
<script>
import { transformData } from '@/utils/MyVueUtil.js';
export default {
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		groupList: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			dialogVisible: false,
			form: {
				group: [],
			},
			rules: {
				group: [
					{ required: true, message: '请选择类别', trigger: ['blur', 'change'] }
				],
			},
			
			options: [],
		};
	},
	mounted() {
		this.dialogVisible = this.visible;
		this.options = transformData(this.groupList.slice(2));
	},
	methods: {
		// 关闭
		handleClose() {
			this.dialogVisible = false;
			this.$emit('close');
		},
		// 批量编辑分类
		handleConfirm() {
			console.log(this.form);
			// if (this.form.group.length <= 0) {
			// 	this.$message.error('请选择类别');
			// 	return;
			// }
			this.$refs.form.validate(valid => {
				if (valid) {
					this.dialogVisible = false;
					this.$emit('confirm', this.form);
				}
			});
		},
	}
};
</script>
<style scoped lang="less">
.edit-group-form {
	.el-cascader {
		width: 100%;
	}
}
</style>
